<template>
  <div class="app-container user">
    <SuspendBall :indent="true" needNearEdge @touchFunc="$router.push('/mindStation/aiCustomerService')" />
    <van-nav-bar title="心理探针" left-arrow @click-left="$router.push('/home')" />
    <div class="content">
      <div class="search-box">
        <el-input v-model="form.title" prefix-icon="el-icon-search" placeholder="请输入内容标题" @change="getData" />
      </div>
      <div class="banner-box">
        <img class="banner" :src="require('@/assets/images/mindStation/banner.png')">
        <!-- <div class="tip">心理服务热线 : 400-850-2525</div> -->
      </div>
      <div class="list-box column">
        <!-- <div class="list-title">心理探针</div> -->
        <div class="filter-box">
          <div class="type-box">
            <div class="type-item" :class="form.type == item.value && 'active'" v-for="(item, index) in typeList"
              :key="index" @click="handelTypeChange(item)">
              {{ item.label }}
            </div>
          </div>
        </div>
        <div class="list-content" v-if="listItemList.length">
          <el-scrollbar>
            <div class="list-item-box" v-for="(item, index) in listItemList" :key="index">
              <div class="list-item">
                <img class="item-cover" :src="require(`@/assets/images/mindStation/scaleType${item.scaleType}.png`)">
                <div class="item-label-box">
                  <div class="item-label"><span class="tag">I-LEB</span>{{ item.scaleName }}</div>
                  <div class="item-tip">{{ item.description }}</div>
                </div>
              </div>
              <div class="handel-box">
                <div class="handle-btn"
                  @click="$router.push({ name: 'ExamTest', query: { scaleItem: JSON.stringify(item), pageIndex: 'exam' } })">
                  {{ item.recordCount ? '重新答题' : '开始答题' }}
                </div>
                <div class="handle-btn" v-if="item.recordCount" :class="item.recordCount || 'disable'"
                  @click="$router.push({ name: 'ExamTest', query: { scaleItem: JSON.stringify(item), pageIndex: 'result' } })">
                  查看报告
                </div>
              </div>
            </div>
          </el-scrollbar>
        </div>
        <div class="empty" v-else>暂无数据</div>
      </div>
    </div>
  </div>
</template>

<script>
import * as api from '@/api/mindStation/index.js';

export default {
  name: 'MindProbes',
  data() {
    return {
      form: { title: '', type: 0 },
      typeList: [
        { label: '趣味测试', value: 0 },
        { label: '初级测试', value: 1 },
        { label: '深度测试', value: 2 },
      ],
      listItemList: [],
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      api.scalesList({ scaleName: this.form.title, scaleType: this.form.type }).then((res) => {
        this.listItemList = res.rows;
      });
    },
    handelTypeChange(item) {
      this.form.type = item.value;
      this.getData();
    },
  },
};
</script>

<style lang="scss" scoped>
@import '@/assets/styles/mixin.scss';

.content {
  width: calc(100% - 30px);
  height: calc(100% - 60px);
  margin: 0 15px;
  display: flex;
  flex-direction: column;

  ::v-deep .el-scrollbar {
    height: 100%;
  }

  .search-box {
    flex-shrink: 0;
    width: 100%;
    margin-bottom: 10px;
  }

  .banner-box {
    flex-shrink: 0;
    position: relative;
    width: 100%;
    margin-bottom: 10px;

    .banner {
      width: 100%;
    }

    .tip {
      position: absolute;
      top: 20px;
      width: 100%;
      text-align: center;
      color: #fff;
      text-shadow: 0px 4px 10px #f66b66;
    }
  }

  .filter-box {
    margin-bottom: 15px;
    display: flex;
    align-items: center;

    .type-box {
      flex: 1;
      display: flex;
      justify-content: space-evenly;
      align-items: center;

      .type-item {
        padding: 2px 0;
        padding-bottom: 5px;
        color: #3d3d3d4c;

        &.active {
          border-bottom: 2px solid #165dff;
          color: #3d3d3d;
          font-weight: bold;
        }
      }
    }
  }

  @include list-box-style;

  .list-box {
    flex: 1;
    overflow: auto;

    .list-item-box {
      background: #f8f8f8;
      border: 1px solid #f8f8f8;
      margin-bottom: 15px;

      &:last-child {
        margin-bottom: 0;
      }

      .list-item {
        width: calc(100% - 20px);
        padding: 10px;
        .tag {
          margin-right: 5px;
          background: linear-gradient(151deg, #ff0000 0%, #ffafd8 80%);
          -webkit-background-clip: text;
          color: transparent;
          font-weight: bold;
        }
      }
    }

    .handel-box {
      display: flex;

      .handle-btn {
        flex: 1;
        margin: 10px 0;
        text-align: center;
        font-size: 15px;
        cursor: pointer;
        border-left: 1px solid #d8d8d8;

        &:first-child {
          border-left: none;
        }

        &.disable {
          color: #a8abb2;
          pointer-events: none;
          cursor: default;
        }
      }
    }
  }

  .empty {
    width: 100%;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
